<form nz-form>
  <ng-template ngFor [ngForOf]="formFields" let-field>
    <nz-form-label [nzSpan]="field.labelWidth">{{field.name}}</nz-form-label>
    <nz-form-control [nzSpan]="field.controlWidth">
      <div [ngSwitch]="field.type">

        <input nz-input *ngSwitchCase="'text'"/>

        <textarea nz-input *ngSwitchCase="'textArea'" rows="3"></textarea>

        <nz-time-picker *ngSwitchCase="'time'" nzPlaceHolder="请选择时间" class="fluid"></nz-time-picker>

        <nz-date-picker *ngSwitchCase="'date'" class="fluid" [nzStyle]="{width: '100%'}"
                        nzFormat="yyyy/MM/dd"></nz-date-picker>

        <nz-date-picker *ngSwitchCase="'datetime'" nzShowTime class="fluid"
                        nzFormat="yyyy/MM/dd HH:mm:ss"
                        [nzStyle]="{width: '100%'}" nzPlaceHolder="请选择时间"></nz-date-picker>

        <nz-range-picker *ngSwitchCase="'period'" [nzShowTime]="{ nzFormat: 'HH:mm' }"
                         class="fluid" nzFormat="yy/MM/dd HH:mm"
                         [nzStyle]="{width: '100%'}"></nz-range-picker>

        <div *ngSwitchCase="'autocomplete'">
          <input placeholder="请选择" nz-input [nzAutocomplete]="auto"/>
          <nz-autocomplete #auto></nz-autocomplete>
        </div>

        <ng-container *ngSwitchCase="'choice'">
          <nz-checkbox-group *ngIf="field.isMultiple"></nz-checkbox-group>

          <nz-radio-group *ngIf="!field.isMultiple"></nz-radio-group>
        </ng-container>

        <nz-upload *ngSwitchCase="'attachment'" nzAction="https://jsonplaceholder.typicode.com/posts/">
          <button nz-button><i nz-icon nzType="upload"></i><span>点击上传</span></button>
        </nz-upload>

      </div>
    </nz-form-control>
  </ng-template>
</form>
